<!--suppress TypeScriptUnresolvedReference, TypeScriptValidateTypes -->
<script lang="ts" setup>
import { ref } from "vue"
import { addCommentApi, getCommentApi } from "@/api/items/items"
import { requestCommentData } from "@/api/items/types/types"
import { useRoute } from "vue-router"
import { ElMessage } from "element-plus"
const itemId = useRoute().params.itemId.toString()
const myHeader = ""
interface replyData {
  from: string
  time: string
  comment: string
  fromHeadImg: string
}
interface commentData {
  name: string
  time: string
  like: number
  comment: string
  commentNum: number
  reply: replyData[]
  isStar: boolean
}
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
const myComment = ref<requestCommentData>({
  itemId: itemId,
  commenttext: "",
  num: 0,
  userId: "HHHH"
})
const loading = ref(false)
const comments = ref<commentData[]>([])
const commentsNew = ref<commentData[]>([])
const getComments = () => {
  getCommentApi(itemId)
    .then((res) => {
      comments.value = res.data
      commentsNew.value = comments.value.map((item) => {
        return {
          ...item,
          isStar: false,
          time: "2021-08-01 12:00:00",
          reply: {
            from: "小红",
            time: "2021-08-01 12:00:00",
            comment: "这是一条回复",
            to: item.userid
          },
          like: Math.floor(Math.random() * 10 + 1),
          commentNum: Math.floor(Math.random() * 10 + 1)
        }
      })
    })
    .catch((err) => {
      console.log(err)
    })
}
getComments()
//计算comments.value中所有num属性的平均值再传递给父组件
const average = ref(0)
const getAverage = () => {
  let sum = 0
  comments.value.forEach((item) => {
    sum += item.num
  })
  average.value = sum / comments.value.length
}
getAverage()
const addComment = () => {
  loading.value = true
  setTimeout(() => {
    addCommentApi(myComment.value)
      .then((res) => {
        if (res.data === "success") {
          ElMessage.success("评论成功")
          getComments()
        } else {
          ElMessage.error("评论失败")
        }
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        loading.value = false
      })
  }, 3000)
}
</script>

<template>
  <div>
    <div class="my-reply">
      <el-avatar class="header-img" :size="40" :src="myHeader" />
      <div class="reply-info">
        <el-input
          tabindex="0"
          contenteditable="true"
          id="replyInput"
          spellcheck="false"
          placeholder="输入评论..."
          v-model="myComment.commenttext"
          class="reply-input"
        />
      </div>
      <div class="reply-btn-box">
        <el-rate
          v-model="myComment.num"
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :colors="colors"
          style="margin-left: 5%"
        />
        <el-button class="reply-btn" size="default" type="primary" @click="addComment" :loading="loading"
          >发表评论</el-button
        >
      </div>
    </div>
    <div v-for="(item, i) in commentsNew" :key="i" class="author-title reply-father">
      <el-avatar class="header-img" :size="40" :src="item.headImg" />
      <div class="author-info">
        <span class="author-name">{{ item.userid }}</span>
        <span class="author-time"
          ><el-rate
            v-model="item.num"
            disabled
            show-score
            text-color="#ff9900"
            :colors="colors"
            score-template="{value}"
        /></span>
      </div>
      <div class="icon-btn">
        <el-icon><Comment /></el-icon>
        <span>{{ item.commentNum }}</span>
        <i class="iconfont el-icon-caret-top" /><el-icon
          color="orange"
          size="16"
          @click=";(item.isStar = !item.isStar), (item.like += item.isStar ? 1 : -1)"
          ><Star v-if="!item.isStar" /><StarFilled v-else /></el-icon
        >{{ item.like }}
      </div>
      <div class="talk-box">
        <p>
          <span class="reply">{{ item.commenttext }}</span>
        </p>
      </div>
      <div class="reply-box">
        <div class="author-title">
          <el-avatar class="header-img" :size="40" :src="item.reply.fromHeadImg" />
          <div class="author-info">
            <span class="author-name">{{ item.reply.from }}</span>
            <span class="author-time">{{ item.reply.time }}</span>
          </div>
          <div class="talk-box">
            <p>
              <span>回复 {{ item.reply.to }}:</span>
              <span class="reply">{{ item.reply.comment }}</span>
            </p>
          </div>
          <div class="reply-box" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-reply {
  padding: 10px;
  background-color: #fafbfc;
}
.my-reply .header-img {
  display: inline-block;
  vertical-align: top;
}
.my-reply .reply-info {
  display: inline-block;
  margin-left: 5px;
  width: 90%;
}
@media screen and (max-width: 1200px) {
  .my-reply .reply-info {
    width: 80%;
  }
}
.my-reply .reply-info .reply-input {
  min-height: 20px;
  line-height: 22px;
  padding: 10px 10px;
  color: #ccc;
  background-color: #fff;
  border-radius: 5px;
}
.my-reply .reply-info .reply-input:empty:before {
  content: attr(placeholder);
}
.my-reply .reply-info .reply-input:focus:before {
  content: none;
}
.my-reply .reply-info .reply-input:focus {
  padding: 8px 8px;
  border: 2px solid #00f;
  box-shadow: none;
  outline: none;
}
.my-reply .reply-btn-box {
  height: 25px;
  margin: 10px 0;
}
.my-reply .reply-btn-box .reply-btn {
  position: relative;
  float: right;
  margin-right: 15px;
}
.my-comment-reply {
  margin-left: 50px;
}
.my-comment-reply .reply-input {
  width: auto;
}
.author-title:not(:last-child) {
  border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}
.author-title {
  padding: 10px;
}
.author-title .header-img {
  display: inline-block;
  vertical-align: top;
}
.author-title .author-info {
  display: inline-block;
  margin-left: 5px;
  width: 60%;
  height: 40px;
  line-height: 20px;
}
.author-title .author-info > span {
  display: block;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.author-title .author-info .author-name {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.author-title .author-info .author-time {
  font-size: 14px;
}
.author-title .icon-btn {
  width: 30%;
  padding: 0 !important;
  float: right;
}
@media screen and (max-width: 1200px) {
  .author-title .icon-btn {
    width: 20%;
    padding: 7px;
  }
}
.author-title .icon-btn > span {
  cursor: pointer;
}
.author-title .icon-btn .iconfont {
  margin: 0 5px;
}
.author-title .talk-box {
  margin: 0 50px;
}
.author-title .talk-box > p {
  margin: 0;
}
.author-title .talk-box .reply {
  font-size: 16px;
  color: #000;
}
.author-title .reply-box {
  margin: 10px 0 0 50px;
  background-color: #efefef;
}
</style>
